<template>
	<div class="edu-page-warp" id="schoolMajorDiv">
		<div class="edu-page-title">学科门类和专业维护</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<el-form ref="queryForm" :model="queryForm" label-direction="left" label-width="100px">
				<el-row :gutter="24" style="height: 50px;">
					<el-col :span="8">
						<el-input
							v-model="queryForm.keyWord"
							placeholder="代码或专业名称"
							style="width:250px"
							@keyup.enter.native="getProfessionInfo"
						>
							<i
								class="el-icon-search"
								slot="suffix"
								style="margin-top:10px;cursor:pointer"
								@click="getProfessionInfo()"
							></i>
						</el-input>
					</el-col>
					<el-col :span="8" :offset="8">
						<el-form-item class="float-right">
							<el-button @click="importData">{{$t('message.import')}}</el-button>
							<el-button @click="exportData">{{$t('message.export')}}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<div v-loading="loading" class="edu-page-warp">
			<el-row :gutter="24">
				<el-col :span="6">
					<div class="edu-page-title">教育部门类和专业类</div>
					<el-card shadow="never" body-style="padding: 24px;">
						<el-tree :load="loadNode" :props="defaultProps" lazy @node-click="handleNodeClick"/>
					</el-card>
				</el-col>
				<el-col :span="18">
					<el-card v-loading="loading" shadow="never" body-style="padding: 24px;">
						<div class="edu-opertion-bar">
							<div class="float-right">
								<el-button type="primary" @click="handleAddCategory()">{{ $t('message.add') }}</el-button>
							</div>
						</div>
						<!-- url="/api/electionservice/elecRoundCourse/page" -->
						<edu-table :data="tableData.list" ref="tableAdd">
							<el-table-column label="门类代码">
								<template slot-scope="scope">{{scope.row.courseCode}}</template>
							</el-table-column>
							<el-table-column label="门类名称">
								<template slot-scope="scope">{{scope.row.courseName}}</template>
							</el-table-column>
							<el-table-column label="门类英文名称">
								<template slot-scope="scope">{{scope.row.natureI18n}}</template>
							</el-table-column>
							<el-table-column label="专业类代码">
								<template slot-scope="scope">{{scope.row.facultyI18n}}</template>
							</el-table-column>
							<el-table-column label="专业类名称">
								<template slot-scope="scope">{{scope.row.credits}}</template>
							</el-table-column>
							<el-table-column label="专业类英文名称">
								<template slot-scope="scope">{{scope.row.credits}}</template>
							</el-table-column>
							<el-table-column :label="$t('message.operating')">
								<template slot-scope="scope">
									<el-button type="text" @click="editlRecord(scope.row)" size="mini">{{$t('message.edit')}}</el-button>
									<el-button
										type="text"
										@click="deleteRecord(scope.row)"
										size="mini"
									>{{$t('message.delete')}}</el-button>
								</template>
							</el-table-column>
						</edu-table>
					</el-card>
				</el-col>
			</el-row>

			<edu-dialog title="新增专业类" width="80%" ref="addProCateDialog" @close="courseTakeDialogClose">
				<el-row>
					<el-form
						:model="queryParams"
						label-position="right"
						label-width="80px"
						class="edu-search-form"
					>
						<el-col :span="6">
							<el-form-item label="教学班">
								<el-input v-model="teachingClass.code" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="课程名">
								<el-input v-model="teachingClass.courseName" :disabled="true"></el-input>
							</el-form-item>
						</el-col>
						<el-form-item class="float-right no-bottom no-right">
							<el-button @click="openStuAddDialog(true)" type="primary">计划内添加</el-button>
							<el-button @click="openStuAddDialog(false)" type="primary">计划外添加</el-button>
							<el-button @click="removeStu" type="danger">删除</el-button>
						</el-form-item>
					</el-form>
				</el-row>
			</edu-dialog>
		</div>
	</div>
</template>
<script>
import UTILS from "common/src/utils/utils";
import { queryDic, findTrainingLevelByProjId } from "common/src/api/dictionary";
import { findFaculty } from "common/src/api/faculty";
import {
	findCategoryList,
	findProfessionClassList,
	findProfessionList
} from "common/src/api/culture/eduProfession";

export default {
	name: "categoryProfession",
	data() {
		return {
			tableData: [],
			addClassRoomVisible: false,
			queryForm: {
				pageNum_: 0,
				pageSize_: 20,
				total: 0,
				name: "",
				departmentCode: "",
				type: "",
				useing: "",
				status: "",
				campus: "",
				tower: "",
				towerManagementId: ""
			},
			roomForm: {
				name: "",
				nameEn: "",
				code: "",
				type: "",
				campus: "",
				tower: "",
				towerManagementId: "",
				departmentCode: "",
				useing: "",
				status: "",
				contactPerson: "",
				contactPhone: "",
				remark: "",
				classNumber: "",
				examNumber: "",
				keyWord: ""
			},
			teachingClass: {
				code: "",
				courseName: ""
			},
			options: {
				campus: [],
				departmentCode: [],
				tower: [],
				towerManagementId: [],
				roomTypes: []
			},
			roomRules: {
				name: [
					{
						required: true,
						message: this.$t("message.plsInputName"),
						trigger: "blur"
					}
				],
				campus: [
					{
						required: true,
						message: this.$t("common.pla.plsSelectRecord"),
						trigger: "blur"
					}
				],
				tower: [
					{
						required: true,
						message: this.$t("common.pla.plsSelectRecord"),
						trigger: "blur"
					}
				],
				towerManagementId: [
					{
						required: true,
						message: this.$t("common.pla.plsSelectRecord"),
						trigger: "blur"
					}
				],
				departmentCode: [
					{
						required: true,
						message: this.$t("common.pla.plsSelectRecord"),
						trigger: "blur"
					}
				],
				useing: [
					{
						required: true,
						message: this.$t("common.pla.plsSelectRecord"),
						trigger: "blur"
					}
				]
			},
			data: [
				{
					label: "同济大学",
					children: []
				}
			],
			defaultProps: {
				label: "name",
				children: "children",
				isLeaf: "leaf"
			}
		};
	},
	created() {
		this.$store.getters.getFuncUnderPage(this.$route.path).then(funcs => {
			this.functions = funcs;
		});
	},
	mounted() {},
	activated() {},
	computed: {},
	watch: {},
	methods: {
		handleAddCategory() {
			this.$refs.addProCateDialog.open();
		},
		onPageSizeChange(size) {
			this.queryForm.pageSize_ = size;
			this.getCampusProfessions();
		},
		onCurrentPageChange(currentPage) {
			this.queryForm.pageNum_ = currentPage;
			this.getCampusProfessions();
		},
		onPageSizeChange_d(size) {
			this.queryForm_d.pageSize_ = size;
			this.getDirMaintens();
		},
		onCurrentPageChange_d(currentPage) {
			this.queryForm_d.pageNum_ = currentPage;
			this.getDirMaintens();
		},
		getDirMaintens() {
			findDirMaintenList(this.queryForm_d).then(res => {
				if (res.code == 200) {
					this.table = res.data.list;
					this.queryForm_d.pageNum_ = res.data.pageNum_;
					this.queryForm_d.pageSize_ = res.data.pageSize_;
					this.queryForm_d.total_ = res.data.total_;
				}
			});
		},
		directionDetail(data) {
			this.queryForm_d.grade = data.grade;
			this.queryForm_d.professionCode = data.professionCode;
			this.direcTitle = data.professionName;
			this.directionModel.grade = data.grade;
			this.directionModel.professionCode = data.professionCode;
			this.directionModel.professionName = data.professionName;
			this.directionModel.professionNameEn = data.professionNameEn;
			this.showdirectionDialog = true;
			this.getDirMaintens();
		},
		getCategoryList() {
			findCategoryList().then(res => {
				if (res.code == 200) {
					for (let key in res.data) {
						this.options.categoryCode.push({
							value: res.data[key].code,
							label:
								res.data[key].name +
								"(" +
								res.data[key].code +
								")"
						});
					}
				}
			});
		},
		getProfessionClassList() {
			let data = "?category=";
			this.options.professionClass = [];
			this.model.categoryCode.forEach(element => {
				findProfessionClassList(data + element).then(res => {
					if (res.code == 200) {
						for (let key in res.data) {
							this.options.professionClass.push({
								value: res.data[key].code,
								label:
									res.data[key].name +
									"(" +
									res.data[key].code +
									")"
							});
						}
					}
				});
			});
		},
		getEduProCode() {
			let data = "?category=";
			this.options.ministryEduCode = [];
			this.model.professionClassCode.forEach(proClass => {
				this.model.categoryCode.forEach(cateCode => {
					if (proClass.substring(0, 2) == cateCode) {
						findProfessionList(
							data + cateCode + "&proClass=" + proClass
						).then(res => {
							if (res.code == 200) {
								for (let key in res.data) {
									this.options.ministryEduCode.push({
										value: res.data[key].code,
										label:
											res.data[key].name +
											"(" +
											res.data[key].code +
											")"
									});
								}
							}
						});
					}
				});
			});
		},
		getBelongBigPro() {
			const self = this;
			self.options.belongBigProfession = [];
			self.model.belongBigProfession = "";
			if (self.model.grade && self.model.category) {
				let data = {};
				data.grade = +self.model.grade;
				data.trainingLevel = self.model.trainingLevel;
				data.faculty = self.model.faculty;
				data.category = "1";
				findProByParam(data).then(res => {
					if (res.code == 200) {
						let temp = [];
						for (let key in res.data) {
							temp.push({
								value: res.data[key].professionCateGory,
								label:
									res.data[key].professionCateGoryName +
									"(" +
									res.data[key].professionCateGory +
									")"
							});
						}
						this.options.belongBigProfession = Array.from(
							new Set(temp)
						);
					}
				});
			}
		},
		initOptions() {
			const data = {
				lang: this.$store.getters.language || "cn",
				type: "allChild",
				keys: ["X_PYCC", "X_YX", "X_XWLX", "X_XZ"]
			};
			this.options.category.push({
				label: this.$t("culture.profession.profession"),
				value: "2"
			});
			this.options.category.push({
				label: this.$t("culture.profession.bigProfession"),
				value: "1"
			});
			// 查询管理部门为1的培养层次
			findTrainingLevelByProjId(1).then(res => {
				if (res.code === 200) {
					this.loadTrainingLevelOptions("trainingLevel", res.data);
				}
			});
            findFaculty().then(res => { 
                let data = {"X_YX": res.data};
                UTILS.fillSelect({ faculty: "X_YX" }, data, this.options);
            });
			queryDic(data)
				.then(res => {
					if (res.code == 200) {
						UTILS.fillSelect(
							{
								// trainingLevel: "X_PYCC",
								faculty: "X_YX",
								toDegree: "X_XWLX",
								lengthSchooling: "X_XZ"
							},
							res.data,
							this.options
						);
					}
				})
				.catch(error => {
					console.log(error);
				});
		},
		loadTrainingLevelOptions(optionKey, dataObj) {
			_.each(dataObj, level => {
				this.options[optionKey].push({
					label:
						"en" === this.$store.getters.language
							? level.nameEN
							: level.nameCN,
					value: level.code
				});
			});
		},
		getTrainingLevelStr(val) {
			let value = "";
			this.options.trainingLevel.forEach(element => {
				if (element.value == val) {
					value = element.label;
				}
			});
			return value;
		},
		getFacultyStr(val) {
			let value = "";
			this.options.faculty.forEach(element => {
				if (element.value == val) {
					value = element.label;
				}
			});
			return value;
		},
		getdialogTitle(val) {
			return val
				? this.$t("culture.profession.addProfession")
				: this.$t("culture.profession.editProfession");
		},
		editProfession(data) {
			this.isEdit = true;
			this.dialogTitle = this.getdialogTitle(this.isEdit);
			this.showDialog = true;
			let param = {};
			param.grade = data.grade;
			param.professionCode = data.professionCode;
			findDirMaintenByPro(param).then(res => {
				if (res.code == 200) {
					let dirStr = "";
					for (let i = 0; i < res.data.length; i++) {
						if (i == res.data.length - 1) {
							dirStr += res.data[i].name;
						} else {
							dirStr += res.data[i].name + ", ";
						}
					}
					this.direcModel.direction = dirStr;
				}
			});
			findCampusProById(row.id).then(res => {
				if (res.code == 200) {
					this.isClearCateCode = false;
					this.isClearProCode = false;
					res.data.grade = res.data.grade + "";
					res.data.startTime = res.data.startTime;
					res.data.endTime = res.data.endTime;
					res.data.categoryCode = [];
					res.data.professionClassCode = [];
					res.data.ministryEduCode = [];
					this.viewModel = res.data;
					let cate = [];
					let pro = [];
					let edu = [];
					for (
						let i = 0;
						i < res.data.campusEduProRelations.length;
						i++
					) {
						if (res.data.campusEduProRelations[i].categoryCode) {
							cate.push(
								res.data.campusEduProRelations[i].categoryCode
							);
						}
						if (
							res.data.campusEduProRelations[i]
								.professionClassCode
						) {
							pro.push(
								res.data.campusEduProRelations[i]
									.professionClassCode
							);
						}
						if (res.data.campusEduProRelations[i].ministryEduCode) {
							edu.push(
								res.data.campusEduProRelations[i]
									.ministryEduCode
							);
						}
					}
					this.viewModel.categoryCode = Array.from(new Set(cate));
					this.viewModel.professionClassCode = Array.from(
						new Set(pro)
					);
					this.viewModel.ministryEduCode = Array.from(new Set(edu));
				}
				this.viewModel.facultyDisplay = this.viewModel.facultyI18n;
				this.viewModel.trainingLevelDisplay = this.viewModel.trainingLevelI18n;
				this.viewModel.professionCodeDisplay = this.viewModel.professionCode;
				this.viewModel.professionNameDisplay = this.viewModel.professionName;
				this.viewModel.professionNameEnDisplay = this.viewModel.professionNameEn;
			});
		},
		editDirection(data) {
			this.isEdit = true;
			this.addDirecTitle =
				this.$t("culture.profession.editDirection") +
				"(" +
				this.direcTitle +
				")";
			let param = {};
			param.grade = data.grade;
			param.professionCode = data.professionCode;
			param.code = data.code;
			findDirMaintenDetail(param).then(res => {
				if (res.code == 200) {
					res.data.startTime = res.data.startTime * 1000;
					res.data.failureTime = res.data.failureTime * 1000;
					this.directionModel = res.data;
				}
			});
			this.editPositinDialog = true;
		},
		addProfession() {
			this.isEdit = false;
			this.resetAdd();
			//this.model.direction="不区分";
			this.model.trainingLevel = "1";
			this.dialogTitle = this.getdialogTitle(this.isEdit);
			this.showDialog = true;
		},
		addDirection() {
			this.isEdit = false;
			this.resetDirec();
			this.addDirecTitle =
				this.$t("culture.profession.addDirection") +
				"(" +
				this.direcTitle +
				")";
			this.editPositinDialog = true;
		},
		delCampusPro(id) {
			this.$confirm(
				this.$t("message.deleteConfirm"),
				this.$t("message.prompt"),
				{
					confirmButtonText: this.$t("message.confirm"),
					cancelButtonText: this.$t("message.cancel"),
					type: "warning"
				}
			).then(_ => {
				delCampusProById(id).then(res => {
					if (res.code == 200) {
						this.$message({
							type: "success",
							message: this.$t("message.deleteSuccess")
						});
						this.getCampusProfessions();
					}
				});
			});
		},

		getdialogTitle(val) {
			return val
				? this.$t("culture.profession.editProfession")
				: this.$t("culture.profession.addProfession");
		}
	}
};
</script>
<style lang="scss">
#schoolMajorDiv {
	.left-part-box,
	.right-part-box {
		float: left;
		margin-right: 20px;
	}
	.left-part-box {
		width: 300px;
		.el-tree {
			min-height: 600px;
		}
	}
	.right-part-box {
		width: calc(96% - 300px);
		.el-card {
			width: 100%;
			display: inline-block;
		}
	}
	#el_card1 {
		height: 100px;
	}
	#el_card2 {
		min-height: 450px;
	}
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 4px;
		color: #3f3f3f;
	}
	.item-title {
		display: block;
		width: 100%;
		height: 32px;
	}
	.tree-title {
		margin: 0;
		line-height: 28px;
		padding-left: 8px;
		.el-button {
			float: right;
			margin-right: 4px;
		}
	}
	.el-tree {
		overflow: auto;
		width: 100%;
		display: inline-block;
		.el-tree-node.is-expanded > .el-tree-node__children {
			display: inline-block;
		}
	}
	.el-dialog__body {
		padding: 30px 20px;
		color: #606266;
		font-size: 14px;
		min-height: 330px;
	}
}
#profession-copy-dialog .el-dialog__body {
	min-height: 130px !important;
}
</style>

